<template>
  <div class="box">
    <RingPie :data="echartsSingleData" class="item" />
    <RoseBar :data="echartsSingleData" class="item" />
    <SpeedBar class="item" />
    <RoseBar :data="echartsSingleData" class="item" />
    <SpeedBar class="item" />
    <PieBar :data="echartsSingleData" class="item" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartsSingleData: this.json.echartsData.singleData,
      echartsSeveralData: this.json.echartsData.severalData,
    };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .item {
    width: 33%;
    height: 50%;
    float: left;
    background: rgba(9, 59, 118, 0.9);
    box-shadow: 0 0 7px #ccffff;
  }
}
</style>>

